<template>
	<!-- 支付 -->
	<view class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{money}}</text>
		</view>

		<view class="pay-type-list">
			<view class="type-item b-b">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>推荐使用微信支付</text>
				</view>
				<view class="iconfont icon-xuanzhong checkbox" :class="wxchange?'checked':''" @click="change"></view>
			</view>

			<view class="type-item b-b">
				<text class="icon yticon icon-alipay"></text>
				<view class="con"><text class="tit">支付宝支付</text></view>
				<view class="iconfont icon-xuanzhong checkbox" :class="wxchange?'':'checked'" @click="change"></view>
			</view>

			<!-- 			<view class="type-item" >
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">预存款支付</text>
					<text>可用余额 ¥198.5</text>
				</view>
<view class="iconfont icon-xuanzhong checkbox "></view>
			</view> -->
		</view>

		<text class="mix-btn" @click="payorder(paytype)">确认支付</text>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				money:'',
				order_id:'',
				wxchange:false,
				paytype:'alipay',
				order_info:'',
				host:'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http'
			}
		},
		onLoad(options) {
			console.log(options);
			this.money=options.money;
			this.order_id=options.order_id;
		},
		methods:{
			// 判断 选择支付方式
			
			change(){
				this.wxchange=!this.wxchange
				if(this.wxchange){
					this.paytype='wxpay'
					uni.$u.toast('该功能正在完善，请使用支付宝进行支付')
				}else{
					this.paytype='alipay'
				}
				console.log(this.paytype);
			},
			
			payorder(paytype){
				console.log(paytype);
				let token=uni.getStorageSync('token')
				this.token=token;
				uni.request({
					method:'POST',
					header:{
						'token':this.token,
						'platform':'app-plus'//所属平台 取值： app-plus 或者 h5 
					},
					data:{
						pay_type:paytype, //类型 wxpay微信支付 alipay支付宝支付
						orderId:this.order_id //订单ID 
					},
					url:this.host+'/order/payOrder',
					success:(res)=> {
						console.log(res);
						console.log(res.data.data.orderInfo);
						this.order_info=res.data.data.orderInfo
						// 支付宝 支付
						if(this.paytype=='alipay'){
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: this.order_info, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
								success: function (res) {
									console.log('success:' + JSON.stringify(res));
									uni.navigateTo({
										url:'/pages/money/paySuccess'
									})
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
							return false
						}
						// 微信 支付
						if(this.paytype=='wxpay'){
							uni.requestPayment({
							    "provider": "wxpay", 
							    "orderInfo": {
							        "appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							        "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
							        "package": "Sign=WXPay",        // 固定值
							        "partnerid": "148*****52",      // 微信支付商户号
							        "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
							        "timestamp": 1597935292,        // 时间戳（单位：秒）
							        "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
							    },
							    success(res) {
									uni.navigateTo({
										url:'/pages/money/paySuccess'
									})
								},
							    fail(e) {}
							})
							return false
						}
						
					}
				})
			} 
		}
	}
</script>

<style lang="scss">
.app {
	width: 100%;
}

.price-box {
	background-color: #fff;
	height: 265upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 28upx;
	color: #909399;
	text {
		font-size: 36rpx;
	}
	.price {
		font-size: 50upx;
		color: $color1;
		margin-top: 12upx;
		&:before {
			content: '￥';
			font-size: 40upx;
		}
	}
}

.pay-type-list {
	margin-top: 20upx;
	background-color: #fff;
	padding-left: 60upx;

	.type-item {
		height: 120upx;
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60upx;
		font-size: 30upx;
		position: relative;
	}

	.icon {
		width: 100upx;
		font-size: 52upx;
	}
	.icon-erjiye-yucunkuan {
		color: #fe8e2e;
	}
	.icon-weixinzhifu {
		color: #36cb59;
	}
	.icon-alipay {
		color: #01aaef;
	}
	.tit {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 4upx;
	}
	.con {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.mix-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 630upx;
	height: 80upx;
	margin: 80upx auto 30upx;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}

.checkbox {
	color: #d1d1d1;
	font-size: 40upx;
	&.checked {
		color: rgb(250, 67, 106);
	}
}
</style>
